<template>
  <div class="standard-setting">
    <div class="s-s-header">
      <el-button type="primary" icon="el-icon-plus" plain @click="handleRowAdd"> 新增 </el-button>
    </div>
    <el-table class="r-s-table" :data="selected">
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column label="字段名（中文）" prop="nameZh">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.nameZh"
            type="text"
            placeholder="请输入字段名（中文）"
            @input="onInput(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="字段名（英文）" prop="nameEn">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.nameEn"
            type="text"
            placeholder="请输入字段名（英文）"
            @input="onInput(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="字段值（中文）" prop="valueZh">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.valueZh"
            type="text"
            placeholder="请输入字段值（中文）"
            @input="onInput(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="字段值（英文）" prop="valueEn">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.valueEn"
            type="text"
            placeholder="请输入字段值（英文）"
            @input="onInput(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="140">
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.id"
            type="text"
            class="red"
            @click="() => handleRowDelete(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: [Array, String],
      default: () => [],
    },
  },
  data() {
    return {
      selected: [],
      visible: false,
      type: 'add',
      currentRow: {},
    }
  },
  computed: {},
  watch: {
    value: {
      handler(newValue) {
        this.selected = [...newValue]
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleRowAdd() {
      this.selected.push({
        nameZh: '',
        nameEn: '',
        valueZh: '',
        valueEn: '',
      })
    },
    async handleRowDelete(index) {
      try {
        await this.$confirm('确认删除？', '提示', {
          type: 'warning',
        })

        this.selected.splice(index, 1)
        this.$emit('input', [...this.selected])
      } catch (err) {
        err.message && console.error(err.message)
      }
    },
    onInput() {
      this.$emit('input', [...this.selected])
    },
  },
}
</script>

<style lang="less" scoped>
.standard-setting {
  .s-s-header {
    display: flex;
    justify-content: flex-end;
  }

  .r-s-table {
    margin: 20px 0;
  }
}
</style>
